<template>
  <cl-page>
    <view class="demo-container">
      <view class="demo-section demo-header">
        <cl-text class="section-title" size="34">Cool Unix UI 示例</cl-text>
        <cl-text class="section-subtitle" size="26">
          下方示例展示了按钮、标签与图标等常见组件的基础用法。
        </cl-text>
      </view>

      <view class="demo-section">
        <cl-text class="section-title" size="30">按钮样式</cl-text>
        <cl-text class="section-note" size="24">
          通过调整 type、icon 等属性即可快速切换风格。
        </cl-text>
        <view class="button-grid">
          <cl-button
            v-for="item in buttonVariants"
            :key="item.type"
            :type="item.type"
            :rounded="item.rounded"
            :border="item.border"
            :icon="item.icon"
            @tap="() => handleButton(item)"
          >
            {{ item.label }}
          </cl-button>
        </view>

        <cl-button
          class="async-button"
          type="primary"
          :loading="loading"
          icon="time-line"
          @tap="simulateAsync"
        >
          模拟异步操作
        </cl-button>
      </view>

      <view class="demo-section">
        <cl-text class="section-title" size="30">标签状态</cl-text>
        <cl-text class="section-note" size="24">
          可配置圆角、镂空与可关闭等特性，适合展示状态标签。
        </cl-text>
        <view class="tag-grid">
          <cl-tag
            v-for="tag in tagList"
            :key="tag.id"
            :type="tag.type"
            :rounded="tag.rounded"
            :plain="tag.plain"
            closable
            @close="removeTag(tag.id)"
          >
            {{ tag.label }}
          </cl-tag>
        </view>
      </view>

      <view class="demo-section">
        <cl-text class="section-title" size="30">图标展示</cl-text>
        <cl-text class="section-note" size="24">
          直接使用 Remix Icon 名称即可在 cl-icon 中渲染图标。
        </cl-text>
        <view class="icon-grid">
          <view
            v-for="icon in iconList"
            :key="icon.name"
            class="icon-card"
          >
            <cl-icon :name="icon.name" :size="48" :color="icon.color" />
            <text class="icon-label">{{ icon.label }}</text>
          </view>
        </view>
      </view>
    </view>
  </cl-page>
</template>

<script setup>
import { ref } from "vue";
import { useUi } from "@/uni_modules/cool-unix";

const ui = useUi();

const buttonVariants = [
  { type: "primary", label: "主按钮", icon: "sparkling-line" },
  { type: "success", label: "成功按钮", icon: "checkbox-circle-line", toastType: "success" },
  { type: "warn", label: "警告按钮", icon: "alert-line", toastType: "warn" },
  { type: "error", label: "错误按钮", icon: "close-circle-line", toastType: "error" },
  { type: "info", label: "信息按钮", icon: "information-line" },
  { type: "light", label: "浅色按钮", icon: "sun-line", border: true },
  { type: "dark", label: "深色按钮", icon: "moon-line", rounded: true }
];

const loading = ref(false);

const tagList = ref([
  { id: 1, label: "待处理", type: "warn", rounded: true },
  { id: 2, label: "已完成", type: "success" },
  { id: 3, label: "审核中", type: "info", plain: true },
  { id: 4, label: "驳回", type: "error", plain: true, rounded: true }
]);

const iconList = [
  { name: "heart-3-line", label: "心形", color: "#EF4444" },
  { name: "star-smile-line", label: "收藏", color: "#F59E0B" },
  { name: "rocket-line", label: "起飞", color: "#6366F1" },
  { name: "chat-3-line", label: "消息", color: "#10B981" }
];

function handleButton(item) {
  if (loading.value) return;

  ui.showToast({
    message: `点击了${item.label}`,
    type: item.toastType,
    duration: 1500
  });
}

function simulateAsync() {
  if (loading.value) return;

  loading.value = true;
  ui.showLoading("正在提交...");

  setTimeout(() => {
    loading.value = false;
    ui.hideLoading();
    ui.showToast({ message: "操作完成", type: "success" });
  }, 1400);
}

function removeTag(id) {
  tagList.value = tagList.value.filter((tag) => tag.id !== id);
}
</script>

<style scoped lang="scss">
.demo-container {
  display: flex;
  flex-direction: column;
  gap: 32rpx;
  padding: 32rpx 28rpx 48rpx;
}

.demo-section {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  padding: 24rpx;
  border-radius: 24rpx;
  background-color: rgba(248, 249, 251, 0.75);
}

.demo-header {
  background: linear-gradient(135deg, #eef2ff 0%, #e0f2fe 100%);
}

.section-title {
  font-weight: 600;
}

.section-subtitle {
  color: #6b7280;
}

.section-note {
  color: #6b7280;
}

.button-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.async-button {
  margin-top: 16rpx;
}

.tag-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20rpx;
}

.icon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24rpx;
  border-radius: 24rpx;
  background-color: #ffffff;
  box-shadow: 0 6rpx 16rpx rgba(15, 23, 42, 0.08);
}

.icon-label {
  margin-top: 12rpx;
  font-size: 24rpx;
  color: #374151;
}
</style>
